<template>
  <view class="spec-add-container">
    <view class="form-view">
      <view class="form-item clearfix">
        <view class="form-label">
          名称
          <text class="icon-requird">*</text>
        </view>
        <view class="form-value">
          <input
            type="text"
            placeholder="请输入名称"
            class="form-input"
            v-model="add_form.specName"
            maxlength="20"
          />
        </view>
      </view>
      <view class="form-item clearfix" v-if="spec_type == 2">
        <view class="form-label">
          属性名
          <text class="icon-requird">*</text>
        </view>
        <view class="form-value">
          <picker
            @change="specNameChange"
            range-key="specName"
            :value="spec_index"
            :range="spec_data"
          >
            <view class="uni-input" v-if="spec_name">{{ spec_name }}</view>
            <view class="uni-input" v-else style="color: #bbb">请选择</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="fixed-bottom">
      <u-button
        type="primary"
        shape="circle"
        :custom-style="{ width: '100%', fontSize: '32rpx', fontWeight: 'bold' }"
        @click="submitData"
        :active-class="'none'"
      >
        保存
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      add_form: {
        pid: 0,
        specName: "",
      },
      spec_data: [],
      spec_type: 2,
      unit_id: "",
      spec_name: "",
      spec_index: 0,
    };
  },
  onLoad(options) {
    this.spec_type = Number(options.type) || 1;
    if (options.id) {
      this.unit_id = options.id;
      uni.setNavigationBarTitle({
        title: "修改属性",
      });
      this.getSpecDetail();
    } else {
      uni.setNavigationBarTitle({
        title: "新增属性",
      });
    }
    if (this.spec_type == 2) {
      this.getSpecList();
    }
  },
  methods: {
    specNameChange(e) {
      this.spec_index = e.detail.value;
      this.spec_name = this.spec_data[this.spec_index].specName;
      this.add_form.pid = this.spec_data[this.spec_index].id;
    },
    async getSpecList() {
      const { err, data } = await this.$u.api.SpecManagegetAll({
        page: 1,
        pageSize: 50,
      });
      if (err) return;
      this.spec_data = data || [];
    },
    async getSpecDetail() {
      const { err, data } = await this.$u.api.SpecManageinfo(this.unit_id);
      if (err) return;
      this.add_form = {
        pid: data?.pid || 0,
        specName: data?.specName || "",
      };
      if (this.spec_type == 2 && this.add_form.pid) {
        await this.getSpecList();
        const idx = this.spec_data.findIndex(
          (item) => item.id == this.add_form.pid
        );
        if (idx >= 0) {
          this.spec_index = idx;
          this.spec_name = this.spec_data[idx].specName;
        }
      }
    },
    async submitData() {
      if (!this.add_form.specName) {
        this.$u.toast("请输入名称");
        return;
      }
      if (this.spec_type == 2 && !this.add_form.pid) {
        this.$u.toast("请选择属性名");
        return;
      }
      uni.showLoading();
      let res;
      if (this.unit_id) {
        res = await this.$u.api.SpecManageedit(this.unit_id, {
          ...this.add_form,
        });
      } else {
        res = await this.$u.api.SpecManageAdd({ ...this.add_form });
      }
      uni.hideLoading();
      const { err } = res;
      if (err) return;
      this.$u.toast("提交成功");
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.spec-add-container {
  background: #fff;
  min-height: 100vh;
  padding-bottom: 120rpx;
  .form-view {
    padding: 40rpx 32rpx 0 32rpx;
    background: #fff;
  }
  .form-item {
    display: flex;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f2f2f2;
    .form-label {
      width: 180rpx;
      color: #333;
      font-size: 30rpx;
      font-weight: 500;
      .icon-requird {
        color: #f56c6c;
        margin-left: 8rpx;
        font-size: 28rpx;
      }
    }
    .form-value {
      flex: 1;
      .uni-input,
      .form-input {
        width: 100%;
        font-size: 30rpx;
        color: #333;
        padding: 0;
        background: none;
        border: none;
      }
      picker {
        width: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
  .fixed-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 32rpx 32rpx 32rpx 32rpx;
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.03);
    z-index: 10;
    .sub-btn {
      width: 100%;
      background: #fb5904;
      color: #fff;
      text-align: center;
      border-radius: 8rpx;
      font-size: 32rpx;
      padding: 24rpx 0;
    }
  }
}
</style>
